<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CRUISE</title>
    <link href="./assets/font-icons/fonts.css" rel="stylesheet">
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/layout.css" rel="stylesheet">
    <link href="./css/dashboard.css" rel="stylesheet">
    <script type="text/javascript" src="./js/layout.js"></script>
    <script type="text/javascript" src="./js/dashboard.js"></script>
</head>
<body>
<div class="app">
    <div class="app-header">
        <div class="app-header-content max-width">
            <div class="collapse" onclick="openCollapse()">
                <span class="icon-navicon"></span>
            </div>
            <div class="logo flex-center">
                <img src="./assets/logo/logo.svg">
            </div>
            <div class="avatar flex-vertical-center">
                <img src="./assets/os-icons/avatar.jpg">
            </div>
        </div>
    </div>
    <div class="app-main">
        <div class="app-main-content max-width">
            <div id="aside" class="app-aside">
                <div class="close">
                    <span class="icon-close" onclick="closeCollapse()"></span>
                </div>
                <div class="menu">
                    <div class="menu-item flex-vertical-center menu-item-active">
                        <span class="icon-dashboard"></span>
                        DASHBOARD
                    </div>
                    <div class="menu-item flex-vertical-center">
                        <span class="icon-sitemap"></span>
                        AGENT
                    </div>
                    <div class="menu-item flex-vertical-center">
                        <span class="icon-boat"></span>
                        My CRUISE
                    </div>
                    <div class="menu-item flex-vertical-center">
                        <span class="icon-life-bouy"></span>
                        HELP
                    </div>
                </div>
                <div class="history">
                    <div class="history-title">History</div>
                    <div class="history-content">
                        <div class="history-content-item">bjstdmngbgr02/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr03/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr04/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr05/Acceptance_test000122</div>
                        <div class="history-content-item">bjstdmngbgr06/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr07/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr08/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr09/Acceptance_test</div>
                        <div class="history-content-item">bjstdmngbgr10/Acceptance_test</div>
                    </div>
                </div>
            </div>
            <div class="app-view">
                <div class="dashboard-container">
                    <div class="statistics">
                        <div class="statistics-item statistics-status warning-background-color">
                            <div class="status-name">Building</div>
                            <div class="status-count">3</div>
                            <span class="icon-cog"></span>
                        </div>
                        <div class="statistics-item  statistics-status success-background-color">
                            <div class="status-name">Idle</div>
                            <div class="status-count">5</div>
                            <span class="icon-coffee"></span>
                        </div>
                        <div class="statistics-item statistics-type-list">
                            <div class="type-item">
                                <div class="type-name">ALL</div>
                                <div class="type-count">8</div>
                            </div>
                            <div class="type-item">
                                <div class="type-name">PHYSICAL</div>
                                <div class="type-count">4</div>
                            </div>
                            <div class="type-item">
                                <div class="type-name">VIRTUAL</div>
                                <div class="type-count">4</div>
                            </div>
                        </div>
                    </div>
                    <div class=" type-search-phone">
                        <div class="type-search">
                            <span class="icon-search"></span>
                            <input>
                        </div>
                    </div>

                    <div class="type-tab">
                        <div class="type-tab-header">
                            <div class="tab-item type-item-active">ALL</div>
                            <div class="tab-item">PHYSICAL</div>
                            <div class="tab-item">VIRTUAL</div>
                            <div class="type-search">
                                <span class="icon-search"></span>
                                <input>
                            </div>
                            <div class="type-show">
                                <span class="icon-th-card"></span>
                                <span class="icon-th-list primary-text-color"></span>
                            </div>

                        </div>
                        <div class="type-tab-content">
                            <div class="deploy-item deploy-item-idle">
                                <img class="deploy-icon" src="./assets/os-icons/windows.png">
                                <div class="deploy-details">
                                    <div class="deploy-address">
                                        <span class="icon-desktop"></span>
                                        <span class="primary-text-color">bjstdmngbgr01.sthoughworks.com</span>
                                    </div>
                                    <div class="deploy-status">
                                        <div class="success-background-color">idle</div>
                                    </div>
                                    <div class="deploy-ip">
                                        <span class="icon-info"></span>
                                        <span>192.168.1.102</span>
                                    </div>
                                    <div class="deploy-path">
                                        <span class="icon-folder"></span>
                                        <span>/var/lib/cruise-agent</span>
                                    </div>
                                    <div id="row1" class="deploy-operate">
                                        <div class="operate-add-button primary-background-color flex-center" onclick="addResources('row1')">
                                            <span class="icon-plus"></span>
                                        </div>
                                        <div id="row1Firefox" class="operate-tag">
                                            <span>Firefox</span>
                                            <span class="icon-trash" onclick="deleteResources('row1Firefox')"></span>
                                        </div>
                                        <div id="row1Safari" class="operate-tag">
                                            <span>Safari</span>
                                            <span class="icon-trash" onclick="deleteResources('row1Safari')"></span>
                                        </div>
                                        <div id="row1Ubuntu" class="operate-tag">
                                            <span>Ubuntu</span>
                                            <span class="icon-trash" onclick="deleteResources('row1Ubuntu')"></span>
                                        </div>
                                        <div id="row1Chrome" class="operate-tag">
                                            <span>Chrome</span>
                                            <span class="icon-trash" onclick="deleteResources('row1Chrome')"></span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="deploy-item  deploy-item-building">
                                <img class="deploy-icon" src="./assets/os-icons/cent_os.png">
                                <div class="deploy-details">
                                    <div class="deploy-address">
                                        <span class="icon-desktop"></span>
                                        <span class="primary-text-color">bjstdmngbgr01.sthoughworks.com</span>
                                    </div>
                                    <div class="deploy-status">
                                        <div class="warning-background-color">building</div>
                                    </div>
                                    <div class="deploy-ip">
                                        <span class="icon-info"></span>
                                        <span>192.168.1.102</span>
                                    </div>
                                    <div class="deploy-path">
                                        <span class="icon-folder"></span>
                                        <span>/var/lib/cruise-agent</span>
                                    </div>
                                    <div id="row2" class="deploy-operate">
                                        <div class="operate-add-button primary-background-color flex-center" onclick="addResources('row2')">
                                            <span class="icon-plus"></span>
                                        </div>
                                        <div id="row2Firefox" class="operate-tag">
                                            <span>Firefox</span>
                                            <span class="icon-trash" onclick="deleteResources('row2Firefox')"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="deploy-button primary-background-color flex-center">
                                    <span class="icon-deny"></span>
                                    <span>Deny</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="app-footer">@Copyright 2017 <b>Thought</b>works</div>
</div>
<div id="dialog" class="dialog">
    <div class="triangle"></div>
    <div class="close-btn"><span class="icon-close"></span></div>
    <div class="form">
        <input id="resources">
    </div>
    <div class="dialog-footer">
        <div class="button add-button">Add Resources</div>
        <div class="button cancel-button">Cancel</div>
    </div>
</div>
</body>
</html>